// src/app/workspace/[workspaceId]/_components/user-item.tsx
import React from 'react';
import {Button} from "@/components/ui/button";
import {cva, VariantProps} from "class-variance-authority";
import {cn} from "@/lib/utils";
import Link from "next/link";
import {useWorkspaceId} from "@/hooks/social/use-workspace-id";
import {Avatar, AvatarFallback, AvatarImage} from "@/components/ui/avatar";

// 模仿shadcn-ui
const userItemVariants = cva(
    `flex items-center gap-1.5 justify-start font-normal h-7 px-[18px] text-sm overflow-hidden`,
    {
        variants: {
            variant: {
                default: 'text-[#f9edffcc]',
                active: 'text-[#481349] bg-white/90 hover:bg-white/90'
            }
        },
        defaultVariants: {
            variant: "default"
        }
    }
)

interface Props {
    id: string
    label?: string
    image?: string
    variant?: VariantProps<typeof userItemVariants>['variant']
}

const UserItem = ({id, label = 'Member', image, variant}: Props) => {
    const workspaceId = useWorkspaceId()

    return (
        <Button
            variant={'transparent'}
            className={cn(
                userItemVariants({variant}),
            )}
            size={'sm'}
            asChild
        >
            <Link href={`/social/workspace/${workspaceId}/member/${id}`}>
                <Avatar className={`size-5 rounded-md mr-1`}>
                    <AvatarImage className={`rounded-md`} src={image}/>
                    <AvatarFallback className={`rounded-md bg-sky-500 text-white text-sm`}>
                        {label?.charAt(0).toUpperCase()}
                    </AvatarFallback>
                </Avatar>
                <span className={`text-sm truncate`}>{label}</span>
            </Link>
        </Button>
    );
};

export default UserItem;